<template>
  <div>
    <div class="btn-c mb20">
      <el-button link @click="handleAdd">新增</el-button>
    </div>

    <PageList
      v-model:pageSize="pageSize"
      v-model:currentPage="pageIndex"
      :total="total"
      @paginationFn="getData"
    >
      <el-table
        v-loading="loading"
        :data="tableData"
        class="mb20"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="Id" width="60" header-align="center" align="center" />
        <el-table-column
          prop="name"
          label="UserName"
          width="100"
          header-align="center"
          align="center"
        />
        <el-table-column prop="content" label="Content" header-align="center" />
        <el-table-column
          prop="status"
          label="Status"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="date"
          label="Date"
          width="120"
          header-align="center"
          align="center"
        />
        <el-table-column label="操作" width="140" header-align="center" align="center">
          <template #default="{ row }">
            <el-button text type="primary" @click="handleEdit(row.id)">编辑</el-button>
            <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              placement="top"
              @confirm="handleDelete(row.id)"
            >
              <template #reference>
                <el-button text type="primary" size="small" style="margin-left: 10px">
                  {{ '删除' }}
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </PageList>

    <el-dialog :title="dlgTitle" v-model="isDlgShow" width="30%">
      <el-form :model="dlgData" label-position="top">
        <el-form-item label="date">
          <el-date-picker
            v-model="dlgData.date"
            type="date"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="dlgData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="content">
          <el-input type="textarea" v-model="dlgData.content" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="status">
          <el-select v-model="dlgData.status" placeholder="">
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>{{ JSON.stringify(dlgData) }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isDlgShow = false">Cancel</el-button>
          <el-button type="primary" @click="handleDlgConfirm(dlgData)"> Modify </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getList, getItem, updateItem, deleteItem } from '@/api/user'

let loading = ref(false)
let pageIndex = ref(1)
let pageSize = ref(10)
let total = ref(0)
let tableData = ref([])

onMounted(() => {
  getData()
})

// 获取数据
const getData = () => {
  loading.value = true
  getList({ pageIndex: pageIndex.value, pageSize: pageSize.value }).then(res => {
    console.log('getData res', res)
    loading.value = false

    const { records, total: count } = res.data
    tableData.value = records || []
    total.value = count
  })
}

let dlgTitle = ref('')
let isDlgShow = ref(false)
let dlgData = ref({})

// 新增
const handleAdd = () => {
  dlgData.value = {}
  dlgTitle.value = '新增'
  isDlgShow.value = true
}

// 编辑
const handleEdit = id => {
  getItem({ id }).then(res => {
    console.log('detail res', res)
    const { data } = res.data
    dlgData.value = data
    dlgTitle.value = '编辑'
    isDlgShow.value = true
  })
}

// 弹窗（保存|更新）- 确定
const handleDlgConfirm = row => {
  updateItem(row).then(res => {
    console.log('edit|save res', res)
    const { data } = res.data || {}
    if (data) {
      if (dlgTitle.value === '新增') {
        // 新增回到第一页
        pageIndex.value = 1
      }
      getData()
      isDlgShow.value = false
    }
  })
}

// 删除
const handleDelete = id => {
  deleteItem({ id }).then(res => {
    console.log('delete res', res)
    if (res.data) getData()
  })
}
</script>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'User' // 指定组件名称
})
</script>

<style scoped>
.btn-c {
  text-align: right;
}

.mb20 {
  margin-bottom: 20px;
}
</style>
